<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>

    <link rel='stylesheet' href='/stylesheets/bootstrap.css' />
    <link rel='stylesheet' href='/stylesheets/signin.css' />
    <script src="/javascripts/jquery-1.9.1.min.js"></script>
    <script src="/javascripts/bootstrap.js"></script>
    <script type="text/javascript">
        function login(){

            var username = $("#inputUsername").val();
            var userpwd  = $("#inputPwd").val();
            $.ajax({
                type:'post',
                url:'http://127.0.0.1:3000/logincheck',

                data:{
                    "username":username,
                    "userpwd":userpwd
                },
                success:function(data){
                    if(data.msgnum==0){
                        alert(data.msg);
                        window.location.href="/login_in_success?username="+username;
                    }else if(data.msgnum==-1){
                        alert(data.msg);
                        $('.myFormm .form-group').addClass('has-error');
                    }
                },
                error:function(){

                }
            })
        };

        function register(){
            var registername = $("#registername").val();
            var registerpwd = $("#registerpassword").val();

            $.ajax({
                type:'post',
                url:'http://127.0.0.1:3000/register',
                data:{
                    "registername":registername,
                    "registerpwd":registerpwd
                },
                success:function(data){
                    if(data.msgnum==0){
                        alert(data.msg);
                    }else if(data.msgnum==-1){
                        $('.myForm .form-group').addClass('has-error');
                        alert(data.msg);

                    }
                },
                error:function(){

                }
            })
        }
        function subgo(){
            $('.myForm .form-group').removeClass('has-error');
            $("#registername").val("");
            $("#registerpassword").val("");
        }
    </script>
  </head>
  <body>
  <div class="container">

    <form class="form-signin myFormm">
      <div class="form-group">
        <h2 class="form-signin-heading">请先登录</h2>
        <label for="inputEmail" class="sr-only">用户名</label>
        <input id="inputUsername" class="form-control" placeholder="用户邮箱" required="" autofocus="" type="email">
        <label for="inputPassword" class="sr-only">密码</label>
        <input id="inputPwd" class="form-control" placeholder="密码" required="" type="password">
      </div>

        <div class="checkbox">
          <label>
            <input value="remember-me" type="checkbox"> 记住我
          </label>
        </div>
        <a  href="#" onclick="subgo();return false;" data-toggle='modal' data-target='.toregister'>没有账号，点击注册</a>
        <button  class="btn btn-lg btn-primary btn-block" type="button" onclick="login()">登录</button>

    </form>
  </div> <!-- /container -->
    <div class="modal fade toregister" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">注册框</h4>
          </div>
          <div class="modal-body">
            <form class="myForm">
              <div class='form-group'>
                <label>用户邮箱：</label>
                <input id="registername" type="text" name="username" class='form-control'>
              </div>
              <div class='form-group'>
                <label>密码：</label>
                <input id="registerpassword" type="password" name="passwd" class='form-control'>
              </div>
              <input type="button" name="" value="注册" class='btn btn-default btn-info' onclick="register()">
            </form>
          </div>
          <div class="modal-footer">
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

  </body>
</html>
